
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="/before/css/common.css" rel="stylesheet" tyle="text/css" />
    <link href="/before/css/style.css" rel="stylesheet" type="text/css" />
    <link href="/before/fonts/iconfont.css" rel="stylesheet" type="text/css" />
    <link href="/before/css/reply.css" rel="stylesheet" type="text/css"/>
    <link href="/before/css/kuadmin.css" type="text/css" rel="stylesheet" />

    <script src="/before/js/lrtk.js" type="text/javascript"></script>
    <script src="/before/js/jquery.min.1.8.2.js" type="text/javascript"></script>
    <script src="/before/js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
    <script src="/before/js/common_js.js" type="text/javascript"></script>
    <script src="/before/js/footer.js" type="text/javascript"></script>
    <script src="/before/js/jquery.jumpto.js" type="text/javascript"></script>
    <script src="/after/js/layer/layer.js" charset="utf-8"></script>
    <script src="/after/js/vue/vue.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="/before/js/jquery.cookie.js"></script><!--jquery的Cookie插件-->
    <title>书籍详情页</title>
</head>
<style>
    #top{
    position: inherit;
    z-index: 9999;
    }
</style>
<body>
<!--头-->
<div id="top"></div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="app">
<!--产品详细页-->
<div class="clearfix  Inside_pages">
    <!--位置-->
    <div id="goodsInfo">
        <div class="Location_link">
            <em></em><a>世界名著</a>  &lt;   <a>神话故事</a>   &lt;   <a>{{thisBook.name}}</a>
        </div>
        <!--产品详细介绍-->
        <div class="Details_style clearfix" >
            <div class="mod_picfold clearfix">
                <div class="clearfix" id="detail_main_img">
                    <div class="layout_wrap preview">
                        <div id="vertical" class="bigImg">
                            <img :src="'/uploads/'+thisBook.picture" width="" height="" alt="" id="midimg" />
                            <div style="display:none;" id="winSelector"></div>
                        </div>
                        <div class="smallImg">
                            <div class="scrollbutton smallImgUp disabled">&lt;</div>
                            <div id="imageMenu">
                                <ul>
                                    <li><img :src="'/uploads/'+thisBook.picture" width="68" height="68" alt="洋妞"/></li>
                                    <li><img :src="'/uploads/'+thisBook.picture" width="68" height="68" alt="洋妞"/></li>
                                    <li><img :src="'/uploads/'+thisBook.picture" width="68" height="68" alt="洋妞"/></li>
                                    <li><img :src="'/uploads/'+thisBook.picture" width="68" height="68" alt="洋妞"/></li>
                                    <li><img :src="'/uploads/'+thisBook.picture" width="68" height="68" alt="洋妞"/></li>
                                    <li><img :src="'/uploads/'+thisBook.picture" width="68" height="68" alt="洋妞"/></li>
                                    <li><img :src="'/uploads/'+thisBook.picture" width="68" height="68" alt="洋妞"/></li>
                                </ul>
                            </div>
                            <div class="scrollbutton smallImgDown">&gt;</div>
                        </div><!--smallImg end-->
                        <div id="bigView" style="display:none;"><div><img width="800" height="800" alt="" src="" /></div></div>
                    </div>
                </div>
                <div class="Sharing">
                    <div class="bdsharebuttonbox bdshare-button-style0-16" data-bd-bind="1441079683326"><a  class="bds_more" data-cmd="more">分享到：</a><a  class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a  class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a  class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a  class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a  class="bds_weixin" data-cmd="weixin" title="分享到微信"></a></div>
                    <script>
                        window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{"bdSize":16},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
                    </script>
                    <!--收藏-->
                    <div class="Collect"><a href="javascript:collect(92)"><em class="ico1"></em></a></div>
                </div>
            </div>
            <!--信息样式-->
            <div class="textInfo">
                <form action="javascript:;" name="ECS_FORMBUY" id="ECS_FORMBUY">
                    <div class="title"><h1>{{thisBook.name}}</h1><p>{{thisBook.publish}}</p></div>
                    <div class="mod_detailInfo_priceSales">
                        <div class="margins">
                            <div class="Price clearfix"><label>价格</label><span><i>{{(thisBook.price*active.discount).toFixed(2)}}</i> <b>{{thisBook.price}}</b></span></div>
                            <div class="Activity clearfix"><label>活动</label><span id="active">{{active.name}}!{{active.content}}</span></div>
                            <div class="p_Size clearfix"><label>优惠券</label><dd class="left">
                                <div class="item"><b></b><a href="#none" title="大礼盒" onclick="myDiscount()">领取优惠券</a></div></dd></div>
                        </div>
                        <div class="s_Review">
                            <a>好评率<b>{{((score()||0)*2).toFixed(2)}}%</b>[评论<b>{{messList.length}}</b>条]</a>
                        </div>
                    </div>


                    <div class="buyinfo" id="detail_buyinfo">
                        <dl>
                            <dt>数量</dt>
                            <dd>
                                <div class="choose-amount left">
                                    <a class="btn-reduce" href="javascript:;" onclick="setAmount.reduce('#buy-num')">-</a>
                                    <a class="btn-add" href="javascript:;" onclick="setAmount.add('#buy-num')">+</a>
                                    <input class="text" id="buy-num" id="buy-num" value="1" onkeyup="setAmount.modify('#buy-num');">
                                </div>
                                <div class="P_Quantity">剩余：{{thisBook.stock}}件</div>
                            </dd>
                            <dd>
                                <div class="wrap_btn"> <a :href="'javascript:addBookToShop('+thisBook.id+')'" class="wrap_btn1" title="加入购物车"></a>
                                </div>
                            </dd>
                        </dl>
                    </div>
                    <div class="Guarantee clearfix">
                        <dl><dt>支付方式</dt><dd><em></em>货到付款（部分地区）</dd><dd><em></em>在线支付</dd>
                            <dd> <div class="payment " id="payment">
                                <a href="javascript:void(0);" class="paybtn">支付方式<span class="iconDetail"></span></a>
                                <ul><li>货到付款</li><li>礼品卡支付</li><li>网上支付</li><li>银行转账</li></ul></div>
                            </dd></dl></div>
                </form>
            </div>

            <!--产品推荐-->
            <div class="Recommend">
                <div class="title_name">同类产品推荐</div>
                <div class="Recommend_list">
                    <ul>
                        <li v-for="recommend in recommendBook" class="clearfix">
                            <div class="pic_img"><a :href="'/stage/LQ_details.ftl?id='+recommend.id"><img :src="'/uploads/'+recommend.picture"></a></div>
                            <div class="r_content">
                                <div class="title"><a :href="'/stage/LQ_details.ftl?id='+recommend.id" target="_blank" target="_blank">{{recommend.name}}</a></div>
                                <div class="p_Price">￥{{recommend.price}}</div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--浏览记录-->
    <div class="clearfix">
        <div class="left_style">
            <div class="user_Records">
                <div class="title_name">用户浏览记录</div>
                <ul>
                    <li v-for="book in cookieBook">
                        <a >
                            <p><img :src="'/uploads/'+book.picture" data-bd-imgshare-binded="1"></p>
                            <p class="p_name">{{book.name}}</p>
                        </a>
                        <p><span class="p_Price">￥{{book.price}}</span><b>{{book.price}}</b></p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="right_style">
            <div class="inDetail_boxOut ">
                <div class="inDetail_box">
                    <div class="fixed_out ">
                        <ul class="inLeft_btn fixed_bar">
                            <li class="active"><a id="property-id" href="#shangpsx" class="current">规格与包装</a></li>
                            <li><a id="detail-id" href="#shangpjs">商品属性</a></li>
                            <li><a id="shot-id" href="#miqsp">售后服务</a></li>
                            <li><a id="coms1-id" href="#coms1">买家评论</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div id="shangpsx">
                <ul class="shangpsx_info">
                    <li><label>图书编号ISBN</label><span>{{thisBook.id}}</span></li>
                    <li><label>产品标准号</label><span>GB/T 18650</span></li>
                    <li><label>作者</label><span>{{thisBook.author}}</span></li>
                    <li><label>出版社</label><span>{{thisBook.publish}}</span></li>
                    <li><label>出版日期</label><span>{{thisBook.publish_date}}</span></li>
                    <li><label>库存</label><span>{{thisBook.stock}}</span></li>
                    <li><label>单价</label><span>{{thisBook.price}}</span></li>
                    <li><label>书本类型</label><span>玄幻</span></li>
                </ul>
            </div>
            <div id="coms1">
                <h3>--以下是评论区域--</h3>
                <div id="shangpsx">
                    <ul class="shangpsx_info" id="contentList">
                        <li v-for="mess in messList" style="width:98%;height: 50px;margin-left:10px;">
                            <h3>
                                <span style="color: blue; font-weight: bolder;float:left;">用户：<a>{{mess.name}} </a></span>
                                <span style="float:right;">评论时间：{{mess.messDate}}</span>
                            </h3>
                            <span >{{mess.messWord}}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <hr/>
            <div id="shangpjs">
                <img src="/uploads/西游记.jpg" width="100%">
            </div>
            <div id="miqsp">
                <img src="/uploads/shouhou.jpg" width="100%">
                <img src="/uploads/shouhou2.jpg" width="100%">
            </div>
        </div>
    </div>
</div>
</div>
<!--右侧-->
<div id="page1"></div>
<!--尾-->
<div id="bottom"></div>
//优惠券
<script>
    //  显示优惠券界面
    function myDiscount(){
        layer.open({
            type:2,
            title:'优惠券',
            fix:'false',
            maxmin:true,
            area:['500px','500px'],
            content:'/czgIndexTop/Discount.do',
            end:function(){
            }
        })
    }
</script>


<script>
    $("#page1").load("/stage/LQ_right.ftl");
    $("#top").load("/czgIndexTop/getBtype.do");
    $("#bottom").load("/stage/Czg_index_foot.ftl");
    //  显示客服聊天界面
    function showTalk(){
        layer.open({
            type:2,
            title:'客服聊天',
            fix:'false',
            maxmin:true,
            area:['800px','700px'],
            content:'/main/skipToTalk.do',
            end:function(){
            }
        })
    }
</script>

</body>
<script>
//    用于得到地址栏参数的方法
    (function($){
        $.getUrlParam = function(name){
            var reg = new RegExp("(^|&)"+name+"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null) return unescape(r[2]);
            return null;
        }
    })(jQuery)

    var app = new Vue({
        el:'#app',
        data:{
            thisBook:[],
            cookieBook:[],
            recommendBook:[],
            messList:[],
            active:[]
        },methods:{
            score:function (){//计算好评率的方法
                var s = 0;
                for(var i=0;i<app.messList.length;i++){
                    s = s + app.messList[i].score;
                }
                s = s*10/app.messList.length;
                return s;
            }
        }
    })

//初始化函数
    $(function(){
        queryOneBook();//查询当前书籍
//        queryCookie();//查询COOKIE浏览记录

    })

//  查询当前书
    function queryOneBook(){
        $.ajax({
            type:"POST",
            dataType:"json",
            url:"/main/queryOneBook.do",
            data:{id:$.getUrlParam('id')},
            success:function(msg){
                app.thisBook = msg.thisBook;//当前书籍
                app.messList = JSON.parse(msg.messList);//书评
                app.recommendBook = msg.bookList;//产品推荐
                app.recommendBook.length = 4;
                saveCookie(JSON.stringify(app.thisBook));
            },error:function(){
                console.log("图书查询出错");
            }
        });
    }

    var saveCookie = function(msg){
        var sss = $.cookie("two");
        if(sss==null||sss=="null"){//避免sss为null时无法判断
            sss="";
        }
    //        var msg = JSON.stringify(app.thisBook);
        if(sss==""&&msg!=null){
            $.cookie("two",msg);
        }else{
            if(sss.indexOf(msg)<0 && msg!=null){
                $.cookie("two",msg+","+$.cookie("two"));
            }else{
                console.log("COOkie已存在");
            }
        }
        app.cookieBook = JSON.parse("["+$.cookie("two")+"]");
    }
    /* 添加购物车的加减操作 */
    var setAmount = {
        min:1,
        max:500,
        reg:function(x) {
            return new RegExp("^[1-9]\\d*$").test(x);
        },
        amount:function(obj, mode) {
            var x = $(obj).val();
            if (this.reg(x)) {
                if (mode) {
                    x++;
                } else {
                    x--;
                }
            } else {
                alert("请输入正确的数量！");
                $(obj).val(1);
                $(obj).focus();
            }
            return x;
        },
        reduce:function(obj) {
            var x = this.amount(obj, false);
            if (x >= this.min) {
                $(obj).val(x);
            } else {
                alert("商品数量最少为" + this.min);
                $(obj).val(1);
            }
        },
        add:function(obj) {
            var x = this.amount(obj, true);
            if (x <= this.max) {
                $(obj).val(x);
            } else {
                alert("商品数量最多为" + this.max);
                $(obj).val(999);
                $(obj).focus();
            }
        },
        modify:function(obj) {
            var x = $(obj).val();
            if (x < this.min || x > this.max || !this.reg(x)) {
                alert("请输入正确的数量！");
                $(obj).val(1);
                $(obj).focus();
            }
        }
    }

//  将当前图书加入Cookie缓存中，即浏览记录


//    加载Cookie中保存的浏览记录
    function queryCookie(){
        app.cookieBook = JSON.parse("["+$.cookie("two")+"]");
    }

//    添加购物车
    function addBookToShop(nowID){
        console.log(app.thisBook);
        if(isLogin()){
            $.ajax({
                type:"POST",
                dataType:"json",
                url:"/main/addBookToShop.do",
                data:{
                    id:app.thisBook.id,
                    name:app.thisBook.name,
                    price:app.thisBook.price*app.active.discount,
                    picture:app.thisBook.picture,
                    customID:'${NowCustom.id}',
                    number:$("#buy-num").val()
                },
                success:function(msg){
                    layer.msg("添加成功！");
                    console.log(msg);
                },error:function(){
                    console.log("添加失败！");
                }
            });
        }else{
            layer.msg("请先登录后，再执行相关操作");
        }

    }

//    判断用户是否登录
    function isLogin(){
        var NowCustom = "${NowCustom}";
        if(NowCustom){
            return true;
        }else{
            return false;
        }
    }

    joinActive();
    //判断图书是否参与了活动
    function joinActive(){
        $.ajax({
            type:"GET",
            dataType:"json",
            url:"/main/joinActive.do",
            data:{
                id:$.getUrlParam("id")
            },success:function(msg){
                if(msg.active){
                    app.active = msg.active;
                }else{
                    app.active.name="未参与任何活动，敬请期待下次吧";
                    app.active.content="";
                    app.active.discount=1;
                }
                console.log(app.active);
            },error:function(){

            }
        })
    }
</script>
</html>
